<template>
  <div class="progress-echarts-container">
    <el-row type="flex" justify="start" align="middle">
      <el-col :sm="12" :lg="8" :xl="5">
        <span class="select-label">显示类型：</span>
        <el-select v-model="yAxisType" placeholder="请选择">
          <el-option v-for="item in codeModel.productEchartsTypeList" :key="item.id" :label="item.name" :value="item.code"> </el-option>
        </el-select>
      </el-col>
      <el-col :sm="16" :lg="10" :xl="6" class="range-area">
        <span class="select-label">{{ `${this.rangeLabel || '金额'}范围：` }}</span>
        <el-input-number :controls="false" :min="0" v-model="startYAxis"></el-input-number>&nbsp;-&nbsp;
        <el-input-number :controls="false" :min="0" v-model="endYAxis"></el-input-number>
      </el-col>
      <el-col :sm="5" :lg="4" :xl="2" v-if="!$route.query.projectId">
        <el-button type="primary" icon="el-icon-full-screen" @click="openFullScreenPage">全屏查看</el-button>
      </el-col>
    </el-row>
    <echarts-bar class="progress-echarts-bar" ref="progress_echarts_bar" :height="echartsHeight" :echartsData="echartsData" :yAxisType="yAxisType" :dataZoomStartValue="startYAxis" :dataZoomEndValue="endYAxis"></echarts-bar>
  </div>
</template>

<script>
/** 子组件 */
import echartsBar from './components/echartsBar'
/** 工具 */
import { getAction } from '@tapui/utils/http'

export default {
  name: 'progressEcharts',
  components: { echartsBar },
  props: {
    projectId: {
      type: Number,
      default: 0
    },
    projectinfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      url: {
        getEchartsInfo: '/sd/productSource/loadSourceInfo',
        queryCodeList: '/sd/echarts/dataCodeList'
      },
      echartsData: [],
      codeModel: {},
      yAxisType: undefined,
      startYAxis: 0,
      endYAxis: 1000,
      echartsHeight: ''
    }
  },
  computed: {
    // 根据选择的类型设置范围名称
    rangeLabel() {
      return this.codeModel.productEchartsTypeList && this.codeModel.productEchartsTypeList.find((v) => v.code === this.yAxisType).name.substring(1)
    },
    // 项目id，由父组件或路由传递
    qry_projectId() {
      return this.projectId || this.$route.query.projectId
    },
    // 减去的高度
    reduceHeight() {
      return this.$route.query.projectId ? 70 : 280
    }
  },
  methods: {
    /** 查询编码 */
    doQueryCode() {
      if (this.url.queryCodeList) {
        getAction(this.url.queryCodeList, {}).then((res) => {
          if (res.success) {
            this.codeModel = res.result
            // 初始化
            this.assignDefaultValue()
          } else {
            this.$tap.alert(res.message, 'warning')
          }
        })
      }
    },
    /** 初始化 */
    assignDefaultValue() {
      this.yAxisType = 'money'
    },
    /** 获取柱状图数据 */
    getEchartsData() {
      this.echartsData = []
      getAction(this.url.getEchartsInfo, { parentid: this.qry_projectId }).then((res) => {
        if (res.success) {
          // 提取出所有产品信息
          this.echartsData = res.result.productsourcelist.reduce((acc, cur) => acc.concat(cur.sourceproductinfo), [])
          this.$nextTick(() => {
            this.$refs['progress_echarts_bar'].drawBarStatic()
          })
        } else {
          this.$tap.message(res.message, 'warning')
        }
      })
    },
    /** 打开全屏查看页面 */
    openFullScreenPage() {
      let { href } = this.$router.resolve({
        path: '/progressEchartsFullScreen',
        query: {
          projectId: this.projectId
        }
      })
      if (this.$store.getters.inMicro) {
        const appName = this.$store.getters.microAppName
        let urlFix = this.$store.getters.microAppList.find((v) => v.name === appName).entry
        if (urlFix.endsWith('/')) {
          urlFix = urlFix.substring(0, urlFix.length - 1)
        }
        href = urlFix + href.substring(appName.length + 1)
      }
      window.open(href, this.$store.getters.token)
    },
    /** 计算高度 */
    chargeHeight() {
      this.echartsHeight = document.body.getBoundingClientRect().height - this.reduceHeight + 'px'
    }
  },
  created() {
    // 携带token
    if (this.$route.query.projectId) {
      this.$store.dispatch('Token', window.name)
    }
    this.doQueryCode()
  },
  mounted() {
    this.chargeHeight()
    this.getEchartsData()
    // 添加高度监听事件
    window.addEventListener('resize', this.chargeHeight)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.chargeHeight)
    })
  }
}
</script>

<style lang="scss" scoped>
.progress-echarts-container {
  padding: 16px 0 0 12px;
  .range-area {
    display: flex;
    align-items: center;
    color: #606266;
  }
  .select-label {
    color: #606266;
  }
  .status-square {
    height: 20px;
    width: 30px;
  }
  .progress-echarts-bar {
    margin: 10px 12px 12px 0;
  }
}
</style>
